<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选港姐</title>
	<style>
		select {
			width: 100px;
			height: 150px;
		}
	</style>
</head>
<body>
	<div>
		<select name="lady" id="left" multiple="multiple">
			<option value="朱玲玲">朱玲玲</option>
			<option value="李嘉欣">李嘉欣</option>
			<option value="赵雅芝">赵雅芝</option>
			<option value="张曼玉">张曼玉</option>
		<select>
		<button>&gt;</button>
		<button>&gt;&gt;</button>
		<button>&lt;</button>
		<button>&lt;&lt;</button>
		<select name="beauty" id="right" multiple="multiple"></select>
	</div>
	<script src="jquery-3.3.1.min.js"></script>
	<script>
		var left=$('#left');
		var right=$('#right');
		var btn1 = $('button')[0];
		var btn2 = $('button')[1];
		var btn3 = $('button')[2];
		var btn4=$('button')[3];
		$(btn1).click(function() {
			for (var i = $(left).children().length-1; i >=0 ; i--) {
				if(left.children()[i].selected){
					left.children()[i].selected=false;
					right.append(left.children()[i]);
				}
			}
		})
		$(btn3).click(function() {
			for (var i = $(right).children().length-1; i >=0 ; i--) {
				if(right.children()[i].selected){
					right.children()[i].selected=false;
					left.append(right.children()[i]);
				}
			}
		})
		$(btn2).click(function(){
			for (var i =left.children().length-1; i >=0 ; i--) {
				left.children()[i].selected=false;
				right.append(left.children()[i]);
			}
		})
		$(btn4).click(function(){
			for (var i =right.children().length-1; i >=0 ; i--) {
				right.children()[i].selected=false;
				left.append(right.children()[i]);
			}
		})		
	</script>	
</body>
</html>